<template>
  <div class="content-box">
    <nav-title title="社保及个人档案信息" />
    <div class="line">
      <span class="important">*</span>
      <div class="label">账户类型</div>
      <div class="value">
        <input type="text" placeholder="请在此输入" v-model="socsec.cDescr" disabled>
      </div>
    </div>
    <div class="line">
      <span class="important">*</span>
      <div class="label">未参加过社会保险/公积金</div>
      <div class="value">
        <group label-width="5em">
          <popup-radio placeholder="请选择" :options="lcList" v-model="socsec.cYesNo"></popup-radio>
        </group>
      </div>
    </div>
    <div class="line">
      <span class="important">*</span>
      <div class="label">账号</div>
      <div class="value">
        <input type="text" placeholder="请在此输入" v-model="socsec.gpcnAcountNum">
      </div>
    </div>
    <div class="line">
      <span class="important">*</span>
      <div class="label">原缴纳地</div>
      <div class="value">
        <input type="text" placeholder="请在此输入" v-model="socsec.cAddress">
      </div>
    </div>
    <div class="line">
      <span class="important">*</span>
      <div class="label">状态</div>
      <div class="value">
      <group label-width="5em">
        <popup-picker value-text-align="left" :data="staVal" :columns="staLength" placeholder="请选择" v-model="socsec.cPhfStatus" show-name></popup-picker>
      </group>
      </div>
    </div>
    

    <div class="bsbtn" @click="save">
      保存
    </div>
  </div>

</template>

<script>
import { Group, PopupRadio ,PopupPicker } from 'vux'
import { getDicItem,saveSocial } from '../../../../api/api'
import { json2Form } from '../../../../util/http'

export default {

  name: 'input-information',
  components: {
    Group, PopupRadio ,PopupPicker
  },
  mounted(){
    //获取字典
    this.getstaDic()
  },
  data() {
    return {
      socsec:{
        rsHireId: 'T003346',
        cDescr:'社会保险',
      },
      staVal:[],
      staLength:1,
      lcList: [{value: '有', key: 'Y'},{value: '无', key: 'N'}],
    }
  },
  methods: {

      //状态
      getstaDic(){
        this.sexVal = []
        let params = {
          fileName: 'C_PHF_STATUS'
        }
        getDicItem(params).then(res => {
          res.retData.forEach((val) => {
            this.staVal.push({name: val.xlatshortname, value: val.fieldvalue})
          });
          this.staLength = res.retData.length
          console.log(res)
        }).catch(res => {

        })
      },

    save() {
      this.socsec.cPhfStatus=this.socsec.cPhfStatus[0]
      saveSocial(json2Form(this.socsec)).then(res => {
        console.log(res)
        const that = this;
        //成功：000000
        /*if(res && res.retCode === '000000' ){
          //保存成功
          // 显示
          this.$vux.alert.show({
            title: '新城',
            content: '保存成功',
            onHide () {
              that.$router.push('/');
            }
          })*/

        // }else{
        //   // 显示
        //   this.$vux.alert.show({
        //     title: '',
        //     content: res.retMsg
        //   })
        // }
      }).catch (res=>{
        this.$vux.alert.show({
          title: '警告',
          content: '网络异常，请稍后重试'
        })
      })

    },
    remove() {

      const _this = this;
      let params = {

      };

      _this.$vux.confirm.show({
          // 组件除show外的属性
          title: '提示',
          content: '确定删除？',
          onCancel () {
          },
          onConfirm () {
            delEducation(json2Form(params)).then(res=>{
              //成功：000000
              if(res && res.retCode === '000000' ){
                //删除成功
                _this.$vux.alert.show({
                  title: '新城',
                  content: '删除成功',
                  onHide () {
                    _this.$router.push('/');
                  }
                })
              }else{
                // 显示
                _this.$vux.alert.show({
                  title: '',
                  content: res.retMsg
                })
              }

            })
            .catch(res=>{
              _this.$vux.alert.show({
                title: '',
                content: '网络异常，请稍后重试'
              })
            })

          }
        })
    }
  }
}
</script>
<style type="text/scss" lang="scss">
.content-box {
  padding: 0 10px;
  .important {
    width: 10px;
    color: red;
  }

  .line {
    display: flex;
    border-bottom: 1px solid #cccccc;
    line-height: 40px;
    .label {
      flex: 3;
      text-align: left;
      font-size: 14px;
    }
    .value {
      flex: 3;
      font-size: 13px;
      text-align: right;
      display: flex;
      justify-content: flex-start;
      color: #707070;
      input {
        width: 100%;
        padding-left: 15px;
      }
    }
    // .controls-box {
    //   flex: 3;
    //   text-align: left;
    //   .controls {
    //     display: inline;
    //   }
    // }
    .select-control {
      flex: 3;
      text-align: left;
    }
    .date-control {
      flex: 3;
      text-align: left;
    }
    // .select-box {
    //   text-align: left;
    //   .controls {
    //     display: inline;
    //   }
    // }
    // .icon {
    //   flex: 1;
    //   text-align: right;
    // }
  }
  .bsbtn{
    background-color: #07bc4b;
    color: white;
    font-size: 16px;
    font-weight: 900;
    line-height: 32px;
    width: 70%;
    height: 32px;
    margin:30px 0;
    margin-left: 15%;
    box-shadow: 3px 3px 5px #888888;
  }
  .submit-btn {
    position: absolute;
    bottom: 35px;
    background-color: #07bc4b;
    color: white;
    font-size: 16px;
    font-weight: 900;
    line-height: 32px;
    width: 110px;
    height: 32px;
    // margin-left: -100px;
    left: 15%;
    box-shadow: 3px 3px 5px #888888;
  }

  .remove-btn {
    position: absolute;
    bottom: 35px;
    background-color: #ff6633;
    color: white;
    font-size: 16px;
    font-weight: 900;
    line-height: 32px;
    width: 110px;
    height: 32px;
    // margin-left: -100px;
    left: 55%;
    box-shadow: 3px 3px 5px #888888;
  }

  .title {
    font-size: 20px;
    font-weight: 900;
    color: #25262d;
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
 {
  opacity: 0;
}
</style>
